<div id="paper">
    <div class="addwj">
        <el-button onclick="indexVm.loadPage('/nav/papers_add.html')" type="primary" size="mini">创建问卷</el-button>
    </div>
    <el-table :data="paperList" stripe style="width: 100%">
        <el-table-column prop="title" label="标题">
        </el-table-column>
        <el-table-column prop="creator_id" label="创建人">
        </el-table-column>
        <el-table-column prop="ctime" label="创建时间">
            <template slot-scope="scope">
                {{scope.row.ctime|currency}}
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="text" @click="delPapers(scope)">删除</el-button>
                <el-button type="text" @click="edit(scope.row.id)">编辑</el-button>
                <!-- 传了id就是paper_id -->
                <el-button type="text" @click="answer(scope.row.id)">问卷作答详情</el-button>
                <a target="_blank" :href="'/papers/release?id='+scope.row.id">发布</a>
            </template>
        </el-table-column>
    </el-table>

</div>
<script>
    new Vue({
        el: '#paper',
        data: function () {
            return {
                paperList: [],
                usersData: []
            }
        },
        filters: {
            currency(time) {
                if (new Date(time).getTime() != 0) {
                    var ntime = new Date(time),
                        y = ntime.getFullYear(),
                        m = ntime.getMonth() + 1,
                        d = ntime.getDate()
                    h = ntime.getHours(),
                        mm = ntime.getMinutes(),
                        s = ntime.getSeconds()
                    if (m < 10) {
                        m = '0' + m
                    }
                    if (d < 10) {
                        d = '0' + d
                    }
                    if (h < 10) {
                        h = '0' + h
                    }
                    if (mm < 10) {
                        mm = '0' + mm
                    }
                    if (s < 10) {
                        s = '0' + s
                    }
                    return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s
                }
            }
        },
        methods: {
            edit: function (id) {
                indexVm.loadPage('/nav/papers_edit.html?paper_id=' + id)
            },
            answer: function (id) {
                indexVm.loadPage('/nav/papers_answer.html?paper_id=' + id)
            },
            delPapers: function (scope) {//删除用户
                var _this = this
                this.$confirm('注意：删除后不可恢复', '确定删除吗？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    callback: function (action) {
                        if (action == 'cancel') {
                            return
                        }
                        //  点击删除之后  
                        _this.loading = true
                        $.get('/papers/del', { id: scope.row.id }, function (result) {
                            if (result.error == 0) {
                                // 在这里scope$index是索引
                                _this.paperList.splice(scope.$index, 1)

                                _this.$message({
                                    type: 'success',
                                    message: '删除成功'
                                })
                            } else {
                                console.error('删除失败')
                            }
                            _this.loading = false
                        })
                    }
                })
            }
        },
        created: function () {
            var _this = this
            // 读取数据库中问卷信息
            $.get('/papers/show', function (result) {
                if (result.error == 0) {
                    _this.paperList = result.data
                    console.log(_this.paperList)
                    $.get('/users/get', function (result) {
                        if (result.error == 0) {
                            _this.usersData = result.data
                            console.log(1)
                            console.log(_this.usersData)
                            // 循环，将创建人由id号变成人名显示
                            for (var m = 0; m < _this.paperList.length; m++) {
                                var creator_id = _this.paperList[m].creator_id
                                for (var n = 0; n < _this.usersData.length; n++) {
                                    var nid = _this.usersData[n].id
                                    var nusername = _this.usersData[n].username
                                    if (creator_id == nid) {
                                        console.log(nid)
                                        console.log(2)
                                        console.log(creator_id)
                                        console.log(nusername)
                                        creator_id = nusername
                                    }
                                }
                            }
                        } else {
                            console.log('用户名获取失败')
                        }
                    })
                }
                _this.paperList = result.data
            })

        },
    })
</script>
<style>
    .addwj {
        width: 100px;
    }

    .content {
        overflow: hidden;
    }

    .content .cleft {
        float: left;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
        width: 20%;
    }

    .content .cright {
        float: left;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
        width: 80%;
    }
</style>